import React, { lazy, Suspense } from 'react'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'

// const Home = lazy(() => import('pages/Home/Home'))
import Home from '@pages/Home'
const Login = lazy(() => import('@pages/Login'))
const AddFriends = lazy(() => import('@pages/AddFriends'))
const FriendApplication = lazy(() => import('@pages/FriendApplication'))
const ChatRoom = lazy(() => import('@pages/ChatRoom'))

const App = () => {
    return (
        <Router>
            <Suspense fallback={ <div>loading...</div> } >
                <div className="app" >
                    {/* 路由重定向至首页 */}
                    <Route path="/" exact render={() => <Redirect to="/login" />}></Route>
                    {/* 首页 */}
                    <Route path="/home" component={Home}></Route>
                    {/* 登录模块 */}
                    <Route path="/login" component={Login}></Route>
                    {/* 添加朋友页面 */}
                    <Route path="/addFriends" component={AddFriends}></Route>
                    {/* 好友申请详情页 */}
                    <Route path="/friendApplication" component={FriendApplication}></Route>
                    {/* 一对一聊天页面 */}
                    <Route path="/chatRoom" component={ChatRoom}></Route>
                </div>
            </Suspense>
        </Router>
    )
}
export default App